<template>
  <div class="jobHome">
    <Card  style="margin-top: 25px">
      <Table :data="jobsData" :columns="jobsColumns" stripe></Table>
      <Page :total="total" show-elevator style="margin-top: 10px" @on-change="changePage"/>
    </Card>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "jobHome",
    data(){
      return{
        total:0,
        jobsData:[],
        jobsColumns:[
          {
            title: '任务编号',
            key: 'jobId',
          },
          {
            title: '任务描述',
            key: 'jobDescribe'
          },
          {
            title: '任务赏金',
            key: 'gold'
          },
          {
            title: '发布时间',
            key: 'createTime'
          },
          {
            title: '完成时间',
            key: 'jobTime'
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '确认接取',
                        content: '您确定接取所点击的任务?',
                        onOk: () => {
                          this.getJob(params.row.jobId)
                        },
                        onCancel: () => {
                          this.$Message.info("取消了当前操作")
                        }
                      })
                    }
                  }
                }, '接受')
              ]);
            },
          }],
        jobsFrom:{
          jobState:'1',
          pageNumber:1,
          pageSize:10,
          jobId:'',
          staffId:''
        }
      }
    },
    methods:{
      getData(){
        this.jobsFrom.jobState = '1'

        axios.get("http://localhost:8888/jobController/queryAll",{params:this.jobsFrom}).then(res =>{
          this.jobsData = res.data.list
          this.total = res.data.total
        })
      },
      getJob(id){
        this.jobsFrom.jobId = id
        this.jobsFrom.jobState = '2'
        this.jobsFrom.staffId = this.$getCookie("userId")
        axios.get("http://localhost:8888/jobController/beforeChangeJobState",{params:this.jobsFrom}).then(ok => {
          if (ok.data) {
            axios.get("http://localhost:8888/jobController/changeJobState", {params: this.jobsFrom}).then(res => {
              if (res) {
                this.$Message.success("成功接取任务")
                this.getData()
              } else {
                this.$Message.error("接取任务失败")
              }
            })
          } else {
            this.$Message.error("任务接取超过5个，想在接取，联系管理员")
          }
        })
      },
      changePage(v){
        this.jobsFrom.pageNumber = v
        this.getData()
      },
    },
    mounted() {
      this.getData();
    }
  }
</script>

<style scoped>
  .jobHome{
    margin:20px 0 0 20px
  }
</style>
